<template>
  <div id="page-activity-sign-up">
    <h2>{{ activity.act_name }} - 活动保险</h2>
      <card>
        <Input v-model="query.realName" placeholder="请输入姓名" style="width: 200px"></Input>
        <Select v-model="query.pkActGroup" style="width: 150px" placeholder="请选择组别">
          <Option :value="''" :key="''" selected>全部组别</Option>
          <Option
            v-for="item in actGroupList"
            :key="item.pk_act_group"
            :value="item.pk_act_group">{{ item.group_name }}</Option>
        </Select>
        <Select v-model="query.insuranceCode" style="width: 150px" placeholder="请选择购买保险状态">
          <Option :value="''" :key="''" selected>保险状态</Option>
          <Option :value="'0'">已购买</Option>
          <Option :value="'1'">未购买</Option>
        </Select>
          <Button type="primary" class="mr10" @click="search()">查询</Button>
      </card>
      <card class="mt10">
        <div class="m10 clearfix">
          <download-btn :download="`${apiUrl}/gxActivityInsurance/exportInsuranceExcel`" :query="this.export">
            <Button type="info" class="fl mr10">导出名单</Button>
          </download-btn>
          <Upload
            :action="`${apiUrl}/gxActivityInsurance/importInsuranceExcel`"
            :show-upload-list="false"
            :accept="'.xlsx,.xls'"
            :on-progress="onImportProgress"
            :on-success="onImportSuccess"
            class="fl mr10">
            <Button type="info" class="fl mr10" :loading="importing">导入保单信息</Button>
          </Upload>
          <Button type="info" class="fl mr10">消息推送</Button>
        </div>
        <Table
          :columns="columns"
          :data="list"
          :loading="loading"
          no-data-text="该查询条件没有任何数据"
          class="mt20">
        </Table>

        <div class="m10 clearfix" v-if="page.total > 0">
          <div class="fr">
            <Page
              show-total
              :total="page.total"
              :current="query.currentPage"
              @on-change="onChangePage">
            </Page>
          </div>
        </div>
    </card>

  </div>
</template>

<script>
  import moment from 'moment'
  import { apiUrl } from '@/config'
  import downloadBtn from '@/components/download-btn'
  import activityApi from '@/api/activity'

  export default {
    name: 'page-activity-sign-up',
    props: [
      'activity'
    ],
    components: {
      downloadBtn
    },
    data () {
      let activityId = this.$route.params.activityId
      return {
        apiUrl,
        loading: false,
        importing: false,
        export: {
          pkActBaseInfo: activityId
        },
        query: {
          pkActBaseInfo: activityId,
          currentPage: 1,
          limit: 10
        },
        page: {
          total: 0
        },
        columns: [
          {
            title: '序号',
            width: 50,
            render: (h, params) => {
              return (this.query.currentPage - 1) * this.query.limit + params.row._index + 1
            }
          },
          {
            title: '姓名',
            width: 80,
            key: 'realName'
          },
          {
            title: '性别',
            width: 50,
            key: 'sexName'
          },
          {
            title: '手机号',
            width: 120,
            key: 'mobile'
          },
          {
            title: '俱乐部',
            width: 100,
            key: 'signRclubName'
          },
          {
            title: '报名组别',
            key: 'pkActGroupName'
          },
          {
            title: '报名费',
            width: 80,
            key: 'signFee'
          },
          {
            title: '保险公司',
            width: 120,
            key: 'insuranceCompany'
          },
          {
            title: '保单号',
            width: 100,
            key: 'insuranceCode'
          },
          {
            title: '客服电话',
            width: 100,
            key: 'insurancePhone'
          },
          {
            title: '保险时间',
            width: 160,
            render: (h, params) => {
              let { row } = params
              if (row.insuranceStartTime && row.insuranceEndTime) {
                return moment(row.insuranceStartTime).format('YYYY-MM-DD HH:mm:ss') + '至' +
                      moment(row.insuranceEndTime).format('YYYY-MM-DD HH:mm:ss')
              } else {
                return '-'
              }
            }
          }
        ],
        list: [],
        form: {
          visible: false,
          data: {},
          template: {}
        }
      }
    },
    watch: {
      'query.currentPage': 'getList'
    },
    methods: {
      onChangePage (currentPage) {
        this.query.currentPage = currentPage
      },
      search () {
        this.query.currentPage = 1
        this.getList()
      },
      async getList () {
        this.loading = true
        const { body } = await activityApi.insurance.list(this.query)
        const { responseData } = body
        this.loading = false
        this.list = responseData.content
        this.page.total = responseData.totalElements
      },
      async getActGroupList () {
        this.loading = true
        const { body } = await activityApi.group.listNoPage({
          pk_act_base_info: this.$route.params.activityId
        })
        const { responseData } = body
        this.loading = false
        this.actGroupList = responseData
      },
      onImportProgress () {
        this.importing = true
      },
      onImportSuccess (response, file, fileList) {
        if (this.$apiHelper.requestSuccessed(response.responseCode)) {
          this.importing = false
          this.$Message.info('导入成功')
          this.getList()
        } else {
          setTimeout(() => {
            this.$Modal.error({
              title: '错误',
              content: response.desc,
              onOk: () => {}
            })
          }, 500)
        }
      }
    },
    mounted () {
      this.getList()
      this.getActGroupList()
    }
  }
</script>
